<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
// 1.初次编译 2.响应式（劫持观察数据、发布订阅）3.指令实现

// 观察者模式
// let EventObj = new EventTarget();

// let person = {
//     run(){
//         console.log("跑");
//     }
// }

// EventObj.addEventListener("run",person.run);

// let dog = {
//     wow(){
//         console.log("叫");
//         EventObj.dispatchEvent(new CustomEvent("run"));
//     }
// }
// dog.wow();

// 发布订阅

// 收集器
class Dep{
    constructor(){
        this.subs = [];
    }
    addSub(sub){
        this.subs.push(sub);
    }
    notify(){
        this.subs.forEach(sub=>{
            sub.update();
        })
    }
}

// 订阅者
class Watcher{
    constructor(cb){
        this.cb = cb;
    }
    update(){
        this.cb();
    }
}



let dep = new Dep();

let person = {
    run(){
        dep.addSub(new Watcher(()=>{
            console.log("触发了wather里的更新");
            console.log("跑");
        }))
    }
}
// 收集订阅者；
person.run();

let dog = {
    wow(){
        console.log("叫");
        dep.notify();
    }
}
setTimeout(() => {
dog.wow();
    
}, 1000);







</script>
</html>